<!--
  Heads up! 👋

  This component comes with some `rtl` classes. Please remove them if they are not needed in your project.
-->

<a
  class="group flex items-center justify-between gap-4 rounded-lg border border-indigo-600 bg-indigo-600 px-5 py-3 transition-colors hover:bg-transparent focus:ring-3 focus:outline-hidden"
  href="#"
>
  <span class="font-medium text-white transition-colors group-hover:text-indigo-600">
    Find out more
  </span>

  <span class="shrink-0 rounded-full border border-current bg-white p-2 text-indigo-600">
    <svg
      class="size-5 shadow-sm rtl:rotate-180"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M17 8l4 4m0 0l-4 4m4-4H3"
      />
    </svg>
  </span>
</a>

<a
  class="group flex items-center justify-between gap-4 rounded-lg border border-current px-5 py-3 text-indigo-600 transition-colors hover:bg-indigo-600 focus:ring-3 focus:outline-hidden"
  href="#"
>
  <span class="font-medium transition-colors group-hover:text-white"> Find out more </span>

  <span class="shrink-0 rounded-full border border-indigo-600 bg-white p-2">
    <svg
      class="size-5 shadow-sm rtl:rotate-180"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M17 8l4 4m0 0l-4 4m4-4H3"
      />
    </svg>
  </span>
</a>
